<template>
  <div class="subject">
    <div class="header">
      <h4>课程管理</h4>
      <el-button type="success" size="small" @click.native="createSubject">创建课程</el-button>
    </div>
    <div class="subtag">
      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
        <el-tab-pane label="课程管理" name="first" style="padding-left:15px;">
          <el-radio-group v-model="radio" size="small">
            <el-radio-button label="普通课程" @click.native="jumpNormal"></el-radio-button>
            <el-radio-button label="班级课程" @click.native="jumpClass"></el-radio-button>
            <el-radio-button label="会员课程"></el-radio-button>
          </el-radio-group>
          <allsearch/>
          <list/>
        </el-tab-pane>
        <el-tab-pane label="课程推荐" name="second"></el-tab-pane>
        <el-tab-pane label="课程统计" name="third">角色管理</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Allsearch from "./components/Allsearch";
import List from './components/list'
export default {
  components: {
    Allsearch,
    List
  },
  data() {
    return {
      activeName2: "first",
      radio:'普通课程',
    };
  },
  methods:{
    jumpClass (e) {
      if(e.target.tagName.toLowerCase() === 'input') {
        return
      }
      this.$router.push({path:'/subject/class'})
      console.log(this.$router)
    },
    createSubject(){
      this.$router.push({path:'/subject/cresubject'})
      console.log(this.$router)
    }
  }
};
</script>

<style lang="scss" scoped>
.subject {
  padding: 20px 60px;
  .header {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 2px solid #e3e3e3;
    position: relative;
    // overflow: hidden;
    height: 38px;
    .el-button {
      position: absolute;
      right: 0;
      top: 0;
    }
    h4 {
      line-height: 50px;
    }
  }
}
.subtag {
  width: 100%;
  padding: 10px;
}
</style>
